<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            
        }
        #header {
            height: 48px;
            line-height: 48px;
            background-color: #e62442;
            color: #fff;
            overflow: hidden;
        }
        #header .header_left {
            width: 20%;
            height: 100%;
            float: left;
            padding-left: 18px;
            box-sizing: border-box;
            display: -webkit-box;
            -webkit-box-align: center;
        }
        #header .header_right {
            width: 80%;
            height: 100%;
            float: left;
            padding-right: 20%;
            box-sizing: border-box;
            font-size: 17px;
            text-align: center;
        }
        .nav {
            border-bottom: 1px solid #e8e8e8;
            background-color: #ffffff;
            position: relative
        }
        .nav ul {
            overflow: hidden;
        }
        .nav ul li {
            width: 33.33333333%;
            height: 44px;
            line-height: 44px;
            float: left;
            color: #999;
            font-size: 14px;
            text-align: center;
            position: relative;
        }
        .list-box{
            padding:0 24px;position:relative;
        }
        .nav ul li .li_box {
            line-height: 1;
            display: inline-block;
            position: relative
        }
        .nav ul li .line {
            width: 1px;
            height: 17px;
            display: block;
            background-color: #999;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .nav ul li.active {
            color: #e62442;
        }
        .tap_active {
            /*background-color: rgba(0, 0, 0, 0.1);*/
        }
        .bottom-line{
            /*不知道切换的效果还是点击的效果，所以先做成简单的点击效果，如需做成动画效果，此样式不适用，需要改样式*/
            display:block;margin-top:-3px;height:3px;background: #e62442;
        }
    </style>
</head>
<body>
    <header id="header">
        <div class="header_left" onclick="api.closeWin();" tapmode="tap_active">
            <!-- <img src="../image/back.png"> -->
        </div>
        <div class="header_right">我的订单</div>
    </header>
    <div class="nav" id="nav">
        <ul>
            <li class="active">
                <div class="list-box">
                    <div class="li_box">待取货</div>
                    <span class="line"></span>
                    <span class="bottom-line"></span>
                </div>
            </li>
            <li>
                <div class="li_box">待配送</div>
                <span class="line"></span>
            </li>
            <li>
                <div class="li_box">已完成</div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
    apiready = function(){
        api.openFrameGroup({
            name: 'masterMyOrderFrame',
            rect: {
                 x: 0, 
                 y: $('#header').height() + $('#nav').height(), 
                 w: 'auto',
                 h: api.winHeight - $('#header').height() - $('#nav').height()
            },
            scrollEnabled: true,
            frames: [{
                name: 'unpaid_frame', 
                url: 'unpaid_frame.html'
            },{
                name: 'not_evaluated_frame', 
                url: 'not_evaluated_frame.html'
            },{
                name: 'completed_frame', 
                url: 'completed_frame.html'
            },{
                name: 'refund_frame', 
                url: 'refund_frame.html'
            }]
        }, function(ret, err) {
            // if (ret) {
            //     alert(JSON.stringify(ret));
            // } else {
            //     alert(JSON.stringify(err));
            // }
        });
    };
</script>
</html>